{% extends "base.html" %}


{% block body %}

<h2 class="page-title">Main Page</h2>

<img src="static/colours.png" style="width:50%;margin-left:auto;margin-right:auto;display:block">

<div>
    <h3 class="text-underline">Perform unittests</h3>
    <form>
    <button formaction="/unittests">
        Run unittests
    </button>

    </form>
</div>

<div>
    <h3 class="text-underline">Test navigation</h3>
    <form>
        <button formaction="/page2" >Second page</button>
    </form>
</div>

<div>
    <h3 class="text-underline">Android tests</h3>

    <div>
        <button onClick="vibrate()">
            vibrate for 1s with pyjnius
        </button>

        <script>
         function vibrate() {
             var request = new XMLHttpRequest();
             request.open('GET', 'vibrate?time=1', true);
             request.send();
             }
        </script>
    </div>

    <div>
        <button onClick="loadUrl()">
            open url
        </button>
        <input type="text" value="http://www.google.com" id="url_field"/>

        <script>
         function loadUrl() {
             var request = new XMLHttpRequest();
             var url = document.getElementById("url_field").value
             request.open('GET', 'loadUrl?url=' + url, true);
             request.send();
             }
        </script>
    </div>

    <div>
        <button onClick="sensor()">
            sensor orientation
        </button>

        <button onClick="vertical()">
            vertical orientation
        </button>

        <button onClick="horizontal()">
            horizontal orientation
        </button>

        <script>
         function sensor() {
             var request = new XMLHttpRequest();
             request.open('GET', 'orientation?dir=sensor', true);
             request.send();
         }

         function horizontal() {
             var request = new XMLHttpRequest();
             request.open('GET', 'orientation?dir=horizontal', true);
             request.send();
         }

         function vertical() {
             var request = new XMLHttpRequest();
             request.open('GET', 'orientation?dir=vertical', true);
             request.send();
         }
        </script>
    </div>

    <div>
        <button onClick="start_service()">
            start service
        </button>

        <button onClick="stop_service()">
            stop service
        </button>

        <div id="service-status">
            {{ 'Service started' if service_running else 'Service stopped' }}
        </div>

        <script>
         function start_service() {
             var request = new XMLHttpRequest();
             request.onload = function() {
                 var elem = document.getElementById('service-status');
                 if (this.status >= 400)
                     elem.textContent = `Service start failed: ${this.statusText}`;
                 else
                     elem.textContent = 'Service started';
             };
             request.open('GET', 'service?action=start', true);
             request.send();
         }

         function stop_service() {
             var request = new XMLHttpRequest();
             request.onload = function() {
                 var elem = document.getElementById('service-status');
                 if (this.status >= 400)
                     elem.textContent = `Service stop failed: ${this.statusText}`;
                 else
                     elem.textContent = 'Service stopped';
             };
             request.open('GET', 'service?action=stop', true);
             request.send();
             alert('Service stopped')
         }
        </script>
    </div>

    <br>
    <br>
</div>

{% endblock %}
